<template>
	<view class="select-com-container">
		<!-- 添加房屋按钮 -->
		<view class="add-house-btn" @click="onAddHouse">
			<u-icon name="plus" color="#3B75FA" size="14"></u-icon>
			<text>添加房屋</text>
		</view>

		<!-- 房屋信息卡片列表 -->
		<view class="house-card" v-for="(house, index) in value" :key="house.key">
			<!-- 卡片头部 -->
			<view class="card-header">
                <view class="card-title-icon"></view>
				<view class="card-title">{{ house.areaName }}{{ house.building }}{{ house.unit }}{{ house.room }}</view>
				<u-icon name="trash" color="#999" size="20px" @click="onRemoveHouse(index)"></u-icon>
			</view>

			<!-- 表单内容 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-star">*</text>
                    <view class="form-label-text">
					产权证明(请上传有效的产权证明文件，如房产证、购房合同等)
                    </view>
				</view>
                <view class="form-item-content">
					<upload 
						:value="house.fileList || []"
						:maxCount="5"
						@input="onFileListChange($event, index)"
						@delete="onFileDelete($event, index)"
					/>
				</view>
			</view>

			<!-- <view class="form-item">
				<view class="form-label">
					<text class="required-star">*</text>
					房屋建筑面积(单位:平方米)
				</view>
				<u-input 
					:value="house.area"
					@input="onAreaInput($event, index)"
					placeholder="请输入" 
					border="none" 
					type="number"
				></u-input>
				<u-line></u-line>
			</view> -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-star">*</text>
					 姓名
				</view>
				<u-input 
					:value="house.name"
					@input="onNameInput($event, index)"
					placeholder="请输入" 
					border="none" 
					type="text"
				></u-input>
				<u-line></u-line>
			</view>

			<!-- 新增业主身份选择 -->
			<view class="form-item">
				<view class="form-label">
					<text class="required-star">*</text>
					身份
				</view>
				<u-picker
				:immediateChange="true"
			     	keyName="label"
					:show="house.identityPickerShow"
					:columns="[identityOptions]"
					@confirm="onIdentityConfirm($event, index)"
					@cancel="onIdentityCancel(index)"
				></u-picker>
				<view class="identity-select" @click="onShowIdentityPicker(index)">
					<text v-if="house.identity">{{ getIdentityLabel(house.identity) }}</text>
					<text v-else style="color:#bbb">请选择身份</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Upload from '@/components/upload/index.vue';

export default {
	name: "SelectCom",
	components: {
		Upload
	},
	props: {
		value: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			identityOptions: [
				{ label: '业主', value: 1 },
				{ label: '家属', value: 2 },
				{ label: '租客', value: 3 }
			]
		}
	},
	methods: {
		onNameInput(nameValue, index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].name = nameValue;
			this.$emit('input', list);
		},
		onFileListChange(fileList, index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].fileList = fileList;
			this.$emit('input', list);
		},
		onFileDelete(event, index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].fileList.splice(event.index, 1);
			this.$emit('input', list);
		},
		onAddHouse() {
			this.$emit('add-house');
		},
		onRemoveHouse(index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list.splice(index, 1);
			this.$emit('input', list);
		},
		onAreaInput(areaValue, index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].area = areaValue;
			this.$emit('input', list);
		},
		onShowIdentityPicker(index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].identityPickerShow = true;
			this.$emit('input', list);
		},
		onIdentityCancel(index) {
			const list = JSON.parse(JSON.stringify(this.value));
			list[index].identityPickerShow = false;
			this.$emit('input', list);
		},
		onIdentityConfirm(e, index) {
			const list = JSON.parse(JSON.stringify(this.value));
			const value = e.value[0].value;
			list[index].identity = value;
			list[index].identityPickerShow = false;
			this.$emit('input', list);
		},
		getIdentityLabel(val) {
			const item = this.identityOptions.find(i => i.value === val);
			return item ? item.label : '';
		}
	}
}
</script>

<style lang="scss" scoped>
	.select-com-container {
		width: 100%;
	}

	.add-house-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		background: linear-gradient( 355deg, #FFFFFF 0%, #E3F0FD 100%);
        box-shadow: inset 0rpx 2rpx 0rpx 0rpx #FFFFFF, 0rpx 5rpx 14rpx 0rpx rgba(169,194,209,0.1);
        border-radius: 18rpx;
        color: #3B75FA;
        font-weight: 500;
        font-size: 30rpx;
        margin:20rpx 0 ;
		text {
			margin-left: 8rpx;
		}
	}

	.house-card {
		background: #FFFFFF;
		border-radius: 18rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
        position: relative;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	

        .card-title-icon{
            position: absolute;
            left: 0;
          
            width: 8rpx;
            height: 31rpx;
            background: #3B75FA;
            border-radius: 12rpx;
        }

		.card-title {
			font-weight: 500;
            font-size: 34rpx;
            color: #333333;
			
		}
	}

	.form-item {
		margin-top: 29rpx;

		.form-label {
			font-weight: 400;
            font-size: 30rpx;
            color: #333333;
			margin-bottom: 20rpx;
            display: flex;
            justify-content: flex-start;
            .form-label-text{
                margin-left: 8rpx;
            }

			.required-star {
				color: #FA5151;
				margin-right: 4rpx;
			}
		}
		
		 .u-input {
			padding: 10rpx 0 !important;
		}
	}
	.form-item-content{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		
	}
</style>
